﻿<!DOCTYPE html>
<html>
	<head>
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<div class="container-fluid">
				{% if logged_in %}
				<div class="navbar navbar-inverse">
					<div class="navbar-inner">
						<div class="brand">
							Добро пожаловать, {{ nickname }}!
						</div>
						<ul class="nav">
							<li class="active"><a href="#">Матчи</a></li>
							<li><a href="#">Друзья</a></li>
							<li><a href="{{ logout_url }}">Выйти</a></li>
							<li class="pull-right"><img src="{{ avatar_url }}" class="img-rounded"/></li>
						</ul>
					</div>
				</div>
				{% else %}
				<div class="hero-unit">
					<div class="row">
						<div class="span6 offset3">
							Для использования приложения, пожалуйста авторизируйтесь с помощью Steam аккаунта:
							<a href="{{ login_url }}" target="_blank"><img src="{{ login_image_url }}"/></a>
						</div>
					</div>
				</div>
				{% endif %}
			{% if logged_in %}
			<table class="table table-hover table-striped table-bordered">
				<caption>Список матчей</caption>
				<thead>
					<tr>
						<th>ID матча</th>
						<th>Тип лобби</th>
					</tr>
				</thead>
				<tbody>
				{% for match in matches %}
					<tr>
						<td>{{ match.match_id }}</td>
						<td>{{ match.lobby_type }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
			{% endif %}
		</div>
	</body>
</html>